<template>
  <el-button :type="props.type" :disabled="props.disabled" :loading="isLoading" @click="handleChange"><slot /></el-button>
</template>
<script lang="ts">
  export default { name: 'ButtonComponent' }
</script>
<script setup lang="ts">
  import type { ButtonInterface, EmitsInterface } from './types'
  const props = withDefaults(defineProps<ButtonInterface>(), {})
  // emits
  const emit = defineEmits<EmitsInterface>()
  // loading
  const isLoading = ref(false)
  // event
  const handleChange = () => {
    return new Promise<void>((resolv, reject) => {
      const isFunction = Object.prototype.toString.call(props.change) === '[object Function]'
      if (!isFunction) {
        emit('click')
      }
      if (isFunction) {
        isLoading.value = true
        props
          .change()
          .then(() => {
            isLoading.value = false
            resolv()
          })
          .catch(() => {
            isLoading.value = false
            reject()
          })
      }
    })
  }
</script>
